<template>
  <div class="container__contructor">
    <van-skeleton :loading="loading">
      <template #template>
        <van-skeleton-avatar avatar-size="58rem" />
        <div :style="{ display: 'flex', width: '100%' }">
          <div :style="{ flex: 1, marginLeft: '16rem', marginRight: '16rem' }">
            <van-skeleton-paragraph />
            <van-skeleton-paragraph row-width="30%" />
            <van-skeleton-paragraph row-width="0%" />
            <van-skeleton-paragraph />
          </div>
          <van-skeleton-image image-size="65rem" image-shape="square" />
        </div>
      </template>
      <div class="container__contructor__top">
        <div class="container__contructor__top__left">
          <img :src="userInfo?.headImg" alt="" v-if="userInfo?.username" />
          <img
            src="../../image/defaultHeadImg.png"
            alt=""
            style="width: 50rem; height: 50rem"
            v-else
          />
          <div
            class="container__contructor__top__left__text"
            @click="
              () => {
                if (userInfo?.username) {
                  router.push('/authentication');
                }
              }
            "
          >
            去认证>
          </div>
        </div>
        <div class="container__contructor__top__mid">
          <div class="container__contructor__top__mid__doctorName">
            {{ userInfo?.username }}
          </div>
          <div class="container__contructor__top__mid__hospitalName">
            {{ userInfo?.hospital }}
          </div>
          <div class="container__contructor__top__mid__showMessage">
            {{ userInfo?.hospitaltype }}
          </div>
        </div>
        <div class="container__contructor__top__right">
          <span class="iconfont" @click="isShowCode">&#xe680;</span>
        </div>
      </div>
      <div class="container__contructor__mid"></div>
      <div class="container__contructor__bottom">
        <div class="container__contructor__bottom__item">
          <span class="container__contructor__bottom__item__key"
            >新增患者 :
          </span>
          <span class="container__contructor__bottom__item__value">+123</span>
        </div>
        <div class="container__contructor__bottom__item">
          <span class="container__contructor__bottom__item__key"
            >待回复 :
          </span>
          <span class="container__contructor__bottom__item__value">23</span>
        </div>
        <div class="container__contructor__bottom__item">
          <span class="container__contructor__bottom__item__key"
            >待认证 :
          </span>
          <span class="container__contructor__bottom__item__value">3</span>
        </div>
      </div>
      <ShowCode
        v-if="showCode && userInfo?.username"
        :showCode="showCode"
        @change-code="changeCode"
      />
    </van-skeleton>
  </div>
</template>
<script setup>
import ShowCode from "../showCode/ShowCode.vue";
import toShowCode from "../effects/showCode";
import { onMounted, ref } from "vue";
import storage from "../../utils/storage";
import { useRouter } from "vue-router";
const router = useRouter();
const loading = ref(true);
const userInfo = ref(storage.getItem("userInfo"));
const { showCode, isShowCode, changeCode } = toShowCode;
onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 0);
});
</script>
<style lang="scss" scoped>
.container__contructor {
  width: 376rem;
  height: 132rem;
  background-color: #fff;
  box-shadow: 0 5rem 10rem #e0e0e0;
  margin-top: -50rem;
  border-radius: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 10rem;
  box-sizing: border-box;
  &__top {
    display: flex;
    justify-content: space-around;
    &__left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      img {
        width: 59rem;
        height: 59rem;
        border-radius: 50%;
      }
      &__text {
        background-color: #0088dc;
        border-radius: 10rem;
        margin: 0 auto;
        padding: 1rem;
        margin-top: -10rem;
        color: #fff;
      }
    }
    &__mid {
      display: flex;
      flex-wrap: wrap;
      width: 205rem;
      font-size: 13rem;
      color: #919191;
      &__doctorName {
        font-size: 16rem;
        font-weight: bold;
        margin-right: 5rem;
        color: #000;
      }
      &__hospitalName {
        width: 140rem;
        padding-left: 10rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    &__right {
      width: 55rem;
      height: 55rem;
      padding-top: 10rem;
      font-size: 52rem;
      color: #2f54eb;
    }
  }
  &__mid {
    border: 1rem solid #c9c8c829;
    width: 80%;
    margin-left: 10%;
  }
  &__bottom {
    display: flex;
    justify-content: space-around;
    padding: 0 20rem;
    &__item {
      color: #919191;
      font-size: 15rem;
      &__value {
        color: #0088dc;
      }
    }
  }
}
</style>
